<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>数量值{{restCount}}</strong></span>
    <ul class="filters">
      <li>
        <a :class="{selected:view=='all'}" href="javascript:;" @click="setList('all')" >全部</a>
      </li>
      <li>
        <a :class="{selected:view=='no'}" href="javascript:;"  @click="setList('no')">未完成</a>
      </li>
      <li>
        <a :class="{selected:view=='yes'}" href="javascript:;"   @click="setList('yes')">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="clearBtn">清除已完成</button>
  </footer>
</template>

<script>
import{mapGetters,mapMutations, mapState}from'vuex'
export default {
  computed:{
    ...mapGetters(['restCount']),
    ...mapState('TodoHearder',['view'])
  },
methods: {
  clearBtn(){
    this.$store.commit('TodoHearder/clearcontent')
  },
...mapMutations('TodoHearder',['setShowList']),
setList(view){
  this.setShowList(view)
}
},
}
</script>
